<template>
  <Detail-dialog
    modal
    showReset
    width="45"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save('dataForm')" @reset="reset('dataForm')">
        <el-form ref="dataForm" label-width="90px" :model="relationEmp" :rules="rules">
              <el-row>
                  <el-col :span="12">
                    <el-form-item label="选择员工" prop="selectEmpInfoList">
                    <el-select multiple  filterable  clearable class="wp-select-400" v-model="relationEmp.selectEmpInfoList" placeholder="选择员工">
                      <el-option
                        v-for="(item,index) in employeeInfoList"
                      :key="index" :label="item.employeeName"  :value="item.employeeCode">
                              <span style="float: left">{{ item.employeeName }}</span>
                         <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mainDepartmentName }}</span>
                      </el-option>
                    </el-select>
                    </el-form-item>
                  </el-col>

              </el-row>
              <el-row>
                <el-col :span="12">
                        <el-form-item label="职位" prop="positionInfoList">
                            <Select-position  custonClass="wp-select-400" v-model="relationEmp.positionInfoList" :resultObject.sync="positionInfoList" returnObject reslutIsObject clearable multiple></Select-position>
                        </el-form-item>
                </el-col>
              </el-row>
            <el-row>
                         <el-col :span="12" v-if="positionInfoList && positionInfoList.length>0">
                            <el-form-item label="主职位" prop="mainPositionCode">
                                <el-select class="wp-select-400" v-model="mainPositionCode" placeholder="请选择">
                                <el-option v-for="(item,index) in positionInfoList" :key="index" :label="item.positionName" :value="item.positionCode"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
              </el-row>
        </el-form>
  </Detail-dialog>
</template>
<script>
import DetailDialog from '@/components/DetailDialog'
import SelectPosition from '@/views/system/components/position/select'
import employee from '@/api/system/employeeAPI'
export default {
  props: {
    title: String,
    visible: Boolean,
    data: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: {DetailDialog, SelectPosition},
  watch: {
    visible: {
      handler (val) {
        this.relationEmp = {}
        this.dialogShow = val
      },
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.employeeInfo = {...val}
          this.positionInfoList = this.employeeInfo.positionInfoList
        }
      },
      deep: true,
      immediate: true
    },
    relationEmp: {
      handler (val) {
        this.positionInfoList = val.positionInfoList
      },
      deep: true
    },
    positionInfoList: {
      handler (val) {
        this.relationEmp.positionInfoList = val || []
        if (val && val.length > 0) {
          const mainPosition = val.find(v => {
            return v.mainPosition === 1
          })
          if (mainPosition) {
            this.mainPositionCode = mainPosition.positionCode
          } else {
            this.mainPositionCode = val[0].positionCode
          }
        } else {
          this.mainPositionCode = ''
        }
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      dialogShow: false,
      employeeInfo: {},
      positionInfoList: [],
      relationEmp: {},
      mainPositionCode: '',
      employeeInfoList: [],
      rules: {
        selectEmpInfoList: [{ required: true, message: '不能为空', trigger: 'blur' }],
        positionInfoList: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.getEmployeeList()
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    getEmployeeList (param) {
      employee.getEmployeeListAPI(param).then(res => {
        this.employeeInfoList = res.data.list || []
      })
    },
    reset (form) {
      this.$refs[form].resetFields()
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (validate) {
          const empInfoList = this.relationEmp.selectEmpInfoList
          let positionInfoList = this.relationEmp.positionInfoList
          let params = []
          for (let index in empInfoList) {
            for (let i in positionInfoList) {
              const position = positionInfoList[i]
              let mainPosition = 0
              if (this.mainPositionCode === position.positionCode) {
                mainPosition = 1
              }
              params.push({employeeCode: empInfoList[index], positionCode: position.positionCode, mainPosition, status: 1})
            }
          }
          employee.addEmployeePositonAPI(params).then(res => {
            this.close()
            this.$emit('afterSave', res)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.position-desc{
  padding: 10px;
  font-weight: 600;
}
.wp-select-400{
    width: 400px;
}
</style>
